今天目標：把首頁清單做成真正的「劇集卡片結構」（封面／片名／類型／評分／收藏★）。先用假資料排版，之後再改成JS動態渲染。

1. 直接貼上「卡片 HTML」

把清單區塊替換成下方內容（使用 Picsum 佔位圖，之後可換成自己的圖片）：

<!-- 劇集清單（Day 4：卡片 HTML 架構） -->
<section id="cards" class="cards">
  <article class="card">
    <img class="cover" src="https://picsum.photos/seed/drama1/640/360" alt="我們的戀愛日記 封面">
    <div class="card-body">
      <h3 class="title">我們的戀愛日記</h3>
      <p class="meta">愛情 / 喜劇 · ⭐ 8.2</p>
      <button class="fav" type="button" aria-pressed="false">★ 收藏</button>
    </div>
  </article>

  <article class="card">
    <img class="cover" src="https://picsum.photos/seed/drama2/640/360" alt="霧中真相 封面">
    <div class="card-body">
      <h3 class="title">霧中真相</h3>
      <p class="meta">懸疑 / 劇情 · ⭐ 8.8</p>
      <button class="fav" type="button" aria-pressed="false">★ 收藏</button>
    </div>
  </article>

  <article class="card">
    <img class="cover" src="https://picsum.photos/seed/drama3/640/360" alt="熱血行動 封面">
    <div class="card-body">
      <h3 class="title">熱血行動</h3>
      <p class="meta">動作 · ⭐ 7.9</p>
      <button class="fav" type="button" aria-pressed="false">★ 收藏</button>
    </div>
  </article>
</section>

之後若改用本地圖片，建議放在 assets/img/，並把 src 換成 assets/img/xxx.jpg。

2. 在 style.css 末尾加入「卡片樣式」

把這段貼到 style.css 最下面：

/* Day 4：卡片網格與樣式 */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin: 18px 0;
}

.card {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.cover {
  width: 100%;
  aspect-ratio: 16/9;    /* 沒有這屬性就改用固定高度 */
  object-fit: cover;
  background: #eee;
}

.card-body { padding: 10px 12px; display: grid; gap: 6px; }
.title { margin: 0; font-size: 1rem; font-weight: 700; }
.meta { margin: 0; font-size: 0.92rem; color: #666; }

.fav {
  justify-self: end;
  border: 1px solid #e5e5e5;
  background: #fff;
  border-radius: 10px;
  padding: 6px 10px;
  cursor: pointer;
  color: #f59e0b;
}
.fav:hover { border-color: #333; transform: translateY(-1px); }

3. 測試與驗收

• 重新整理首頁，應該看到 三張卡片，排成網格。
• 每張卡片都有 封面、片名、類型、評分、收藏按鈕。
• 視窗縮小會自動換行（RWD）。
• 收藏按鈕尚未有功能（之後加互動、連LocalStorage）。

• 清單區塊會變成「卡片網格」
• 每張卡片含：封面、片名、類型、評分、收藏按鈕
• 手機會自動換行排列